<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-02-28 14:13:19
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-10 14:00:58
-->
<template>
  <div>
    <el-dialog
      title="新建回款计划"
      :visible.sync="dialog.newPlanShow"
      width="50%"
      @close="planClose"
    >
      <el-form
        :model="planForm"
        ref="planForm"
        :rules="planRules"
        label-position="top"
        v-if="dialog.newPlanShow"
      >
        <div class="basics">基础信息</div>
        <div class="formItem">
          <el-form-item label="客户名称" prop="customer">
            <el-input
              v-model="planForm.customer"
              placeholder="+ 添加"
              @focus="customerAdd"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同名称" prop="contract">
            <el-input
              v-model="planForm.contract"
              placeholder="+ 添加"
              @focus="contractAdd"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划回款金额" prop="planAmount">
            <el-input
              v-model="planForm.planAmount"
              placeholder="请输入计划回款计划"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划回款日期" prop="date">
            <el-date-picker
              v-model="planForm.date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="提前几天提醒">
            <el-input
              v-model="planForm.remind"
              placeholder="请输入提前几天"
              type="number"
            ></el-input>
          </el-form-item>
          <el-form-item label="回款方式" prop="type">
            <el-select v-model="planForm.type" placeholder="请选择选择回款方式">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              rows="3"
              v-model="planForm.remark"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item> </el-form-item>
        </div>
      </el-form>
      <span slot="footer">
        <el-button @click="dialog.newPlanShow = false">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </span>
    </el-dialog>
    <customer :dialog="dialog" v-if="dialog.customerShowEject"></customer>
    <contract :dialog="dialog" v-if="dialog.contractShowEject"></contract>
  </div>
</template>

<script>
import { planInsert, planUpdate } from "@/api/CRM/xshk";
import customer from "../CRM/customer.vue";
import Contract from "../CRM/contract.vue";
export default {
  components: { customer, Contract },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      xshkList: [],
      options: [],
      typeOptions: [
        {
          value: 1,
          label: "微信支付",
        },
        { value: 2, label: "支付宝支付" },
        { value: 3, label: "网银支付" },
        { value: 4, label: "其他" },
      ],
      planRules: {
        customer: [
          {
            required: true,
            message: "请选择客户名称",
            trggle: "blur",
          },
        ],
        contract: [
          {
            required: true,
            message: "请选择合同名称",
          },
        ],
        planAmount: [
          {
            required: true,
            message: "请输入回款金额",
            trggle: "blur",
          },
        ],
        date: [
          {
            required: true,
            message: "请选择回款日期",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择回款方式",
          },
        ],
      },
      planForm: {
        customerId: "",
        customer: "",
        contractId: "",
        contract: "",
        planAmount: "",
        date: "",
        remind: "",
        type: "",
        remark: "",
      },
    };
  },
  methods: {
    // 合同添加
    contractAdd() {
      if (this.planForm.customerId == "") {
        this.$message.info("请先选择客户");
      } else {
        this.dialog.contractShowEject = true;
        this.$nextTick(function () {
          this.dialog.contractShow = true;
        });
      }
    },
    // 客户添加
    customerAdd() {
      this.dialog.customerShowEject = true;
      this.$nextTick(function () {
        this.dialog.customerShow = true;
      });
    },
    // 关闭新建回款计划
    planClose() {
      this.dialog.newPlanEject = false;
      this.planForm = {
        customerId: "",
        customer: "",
        contractId: "",
        contract: "",
        planAmount: "",
        date: "",
        remind: "",
        type: "",
        remark: "",
      };
    },
    // 提交审核
    submit() {
      this.$refs.planForm.validate((valid) => {
        if (!valid) return;
        if (this.planForm.id == undefined) {
          planInsert(this.planForm).then((res) => {
            this.$message.success(res.msg);
            this.dialog.newPlanShow = false;
            this.$parent.getPlanList();
          });
        } else {
          planUpdate(this.planForm).then((res) => {
            this.$message.success(res.msg);
            this.dialog.newPlanShow = false;
            this.$parent.getPlanList();
          });
        }
        console.log(this.planForm.id);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  .formItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /deep/.el-form-item {
      width: 48%;
      .el-input__inner {
        width: 330px;
      }
    }
  }
}
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.approve {
  display: flex;
  flex-wrap: wrap;
}
.examine {
  display: flex;
  margin-right: 20px;
  padding: 0 5px;
  .examine-qd {
    display: flex;
    flex-direction: column;
    align-items: center;
    .circle-img {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 40px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #1267fa;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .circleIcon {
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>